<template>
  <el-container style="height: 100vh; border-radius: 20px; overflow: hidden;">
    <BackgroundComponent></BackgroundComponent>
    <el-header style="background-color: #fff; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-radius: 20px 20px 0 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);">
      <h2 style="font-size: 24px; font-weight: 600; color: #333; margin: 0;">zhupp的智能客服</h2>
      <div v-if="isLoggedIn" style="display: flex; align-items: center;">
        <!-- 显示用户头像 -->
        <img :src="userAvatar" alt="头像" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;" />
        <!-- 显示用户名 -->
        <span style="font-size: 16px; color: #333;">{{ userName }}</span>
        <!-- 退出按钮 -->
        <el-button @click="logout" size="large" type="text" style="margin-left: 15px; font-weight: bold; color: #ff4d4f; padding: 6px 10px; font-size: 20px; border-radius: 20px;">
          <i class="el-icon-link" style="margin-right: 10px; font-size: 24px;"></i>
        </el-button>
      </div>
      <div v-else style="display: flex;">
        <!-- 登录和注册按钮 -->
        <el-button @click="goToLogin" size="large" type="primary" style="margin-right: 10px; padding: 12px 20px; font-size: 16px; border-radius: 30px;">登录</el-button>
        <el-button @click="goToRegister" size="large" type="success" style="padding: 12px 20px; font-size: 16px; border-radius: 30px;">注册</el-button>
      </div>
    </el-header>

    <el-container style="flex: 1; display: flex; overflow: hidden;">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246); display: flex; flex-direction: column; justify-content: space-between;">
        <el-menu :default-active="activeMenu" @select="handleMenuSelect">
          <el-menu-item index="1-1">
            <i class="el-icon-chat-dot-round"></i>
            <span>聊天</span>
          </el-menu-item>
          <el-menu-item index="1-0" @click="goToProfiles">
            <i class="el-icon-user"></i>
            <span>个人信息</span>
          </el-menu-item>
        </el-menu>

        <el-button @click="goToFeedback" size="large" type="primary" style="margin: 20px; margin-bottom: 20px; border-radius: 50px; background-color: #c1c1c1; color: white; padding: 18px 30px; font-size: 18px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-color: #c1c1c1;">
          <i class="el-icon-message" style="font-size: 18px; margin-left: auto;"></i>
        </el-button>
      </el-aside>

      <el-main style="flex-grow: 1; display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); overflow: hidden;">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import BackgroundComponent from '@/components/BackgroundComponent.vue';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'MainView',
  components: {
    BackgroundComponent,
  },
  data() {
    return {
      isNavigating: false, // 防止重复导航
      userAvatar: 'https://th.bing.com/th/id/R.83933e899522a1c1428bd600ce88ed44?rik=e3F8UnyAmcK46g&pid=ImgRaw&r=0&sres=1&sresct=1',
    };
  },
  computed: {
    ...mapState({
      userName: state => state.userInfo.username,
    }),
    isLoggedIn() {
      return !!sessionStorage.getItem('jwt_token');
    },
    activeMenu() {
      if (this.$route.path === '/chat') {
        return '1-1';
      } else if (this.$route.path === '/profiles') {
        return '1-0';
      }
      return '';
    }
  },
  mounted() {
    console.log(this.userAvatar);  // 检查头像路径是否正确
    if (this.isLoggedIn) {
      this.fetchUserInfo();
    }
  },
  methods: {
    ...mapActions(['fetchUserInfo']),

    logout() {
      sessionStorage.removeItem('jwt_token');
      this.$router.push('/login');
    },

    goToLogin() {
      this.$router.push('/login');
    },

    goToRegister() {
      this.$router.push('/register');
    },

    goToProfiles() {
      if (this.isNavigating || this.$route.path === '/profiles') {
        return; // 如果正在导航，或者已经在个人信息页，返回
      }
      this.isNavigating = true;
      this.$nextTick(() => {
        this.$router.push('/profiles').finally(() => {
          this.isNavigating = false; // 导航完成后重置标志
        });
      });
    },

    goToFeedback() {
      if (this.isNavigating || this.$route.path === '/feedback') {
        return; // 防止重复跳转
      }
      this.isNavigating = true;
      this.$nextTick(() => {
        this.$router.push('/feedback').finally(() => {
          this.isNavigating = false;
        });
      });
    },

    handleMenuSelect(index) {
      if (index === '1-1' && this.$route.path !== '/chat') {
        this.$router.push('/chat');
      }
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden; /* 禁止滚动条 */
}

el-header h2 {
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.el-menu {
  width: 100%;
}

.el-button {
  margin-left: 10px;
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-button i {
  margin-right: 5px;
}

.el-button:hover {
  transform: scale(1.05);
}

/* 自定义反馈按钮样式 */
.el-button.el-icon-message {
  margin-left: auto;
  margin-right: auto;
}

/* 反馈按钮大小调整 */
.el-button[type="primary"] {
  padding: 18px 30px; /* 增加按钮的内边距 */
  font-size: 18px; /* 增加字体大小 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 50px; /* 增加圆角 */
}

/* 去除滚动条样式 */
.el-aside, .el-main {
  overflow: hidden !important; /* 禁止滚动条 */
}
</style>
